<template>
  <div class="fill-height">
    <!-- 页面标题和返回按钮 -->
    <div class="page-header">
      <div class="header-content">
        <el-button
          icon
          @click="$router.go(-1)"
          class="back-btn"
        >
          <el-icon><ArrowLeft /></el-icon>
        </el-button>
        <h1 class="page-title">
          <el-icon class="title-icon"><InfoFilled /></el-icon>
          任务详情
        </h1>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-loading-component />
      <p class="loading-text">加载中...</p>
    </div>

    <!-- 任务详情 -->
    <div v-else-if="jobDetail">
      <el-card class="detail-card" header="基本信息">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
            <el-button
              type="primary"
              @click="refreshDetail"
              :loading="loading"
            >
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
          </div>
        </template>
        
        <el-row :gutter="24">
          <el-col :span="12">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="任务ID">
                <el-icon><Document /></el-icon>
                {{ jobDetail.id }}
              </el-descriptions-item>
              <el-descriptions-item label="任务名称">
                <el-icon><Tag /></el-icon>
                {{ jobDetail.jobName }}
              </el-descriptions-item>
              <el-descriptions-item label="任务分组">
                <el-icon><Folder /></el-icon>
                {{ jobDetail.groupName }}
              </el-descriptions-item>
              <el-descriptions-item label="任务描述">
                <el-icon><InfoFilled /></el-icon>
                {{ jobDetail.jobDesc }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
          
          <el-col :span="12">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="Cron表达式">
                <el-icon><Clock /></el-icon>
                <el-tag type="info" size="small">{{ jobDetail.cronExpression }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="调度类型">
                <el-icon><Setting /></el-icon>
                <el-tag type="primary" size="small">{{ jobDetail.scheduleTypeDesc }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="任务状态">
                <el-icon><Check /></el-icon>
                <el-tag :type="getStatusType(jobDetail.triggerStatus)" size="small">
                  {{ jobDetail.triggerStatusDesc }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="下次触发时间">
                <el-icon><Calendar /></el-icon>
                {{ formatDateTime(jobDetail.nextTriggerTime) }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </el-card>

      <!-- 调度策略详情 -->
      <el-card class="detail-card" header="调度策略">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="分片参数">
                <el-icon><Share /></el-icon>
                {{ jobDetail.shardingParams || '无' }}
              </el-descriptions-item>
              <el-descriptions-item label="分片数量">
                <el-icon><Number /></el-icon>
                {{ jobDetail.sharding }}
              </el-descriptions-item>
              <el-descriptions-item label="路由策略">
                <el-icon><Connection /></el-icon>
                {{ jobDetail.routeStrategy }}
              </el-descriptions-item>
              <el-descriptions-item label="阻塞策略">
                <el-icon><Lock /></el-icon>
                {{ jobDetail.blockStrategy }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
          
          <el-col :span="12">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="重试次数">
                <el-icon><Refresh /></el-icon>
                {{ jobDetail.retryCount }}
              </el-descriptions-item>
              <el-descriptions-item label="超时时间(秒)">
                <el-icon><Timer /></el-icon>
                {{ jobDetail.timeout }}
              </el-descriptions-item>
              <el-descriptions-item label="告警邮箱">
                <el-icon><Message /></el-icon>
                {{ jobDetail.alarmEmail || '无' }}
              </el-descriptions-item>
              <el-descriptions-item label="最后触发时间">
                <el-icon><Calendar /></el-icon>
                {{ formatDateTime(jobDetail.lastTriggerTime) }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </el-card>

      <!-- 操作按钮 -->
      <el-card class="detail-card" header="操作">
        <el-space>
          <el-button
            type="warning"
            @click="triggerJob"
            :loading="triggering"
          >
            <el-icon><VideoPlay /></el-icon>
            触发任务
          </el-button>
          
          <el-button
            type="success"
            @click="viewJobLogs"
          >
            <el-icon><Document /></el-icon>
            查看日志
          </el-button>
          
          <el-button
            type="primary"
            @click="$router.go(-1)"
          >
            <el-icon><ArrowLeft /></el-icon>
            返回列表
          </el-button>
        </el-space>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { jobInfoApi } from '@/services/api'
import type { JobInfoVO, ApiResult } from '@/types/job'

const route = useRoute()
const router = useRouter()

// 响应式数据
const loading = ref(false)
const triggering = ref(false)
const jobDetail = ref<JobInfoVO | null>(null)

// 获取状态类型
const getStatusType = (status: number) => {
  switch (status) {
    case 0:
      return 'danger'
    case 1:
      return 'success'
    default:
      return 'info'
  }
}

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  if (!dateTime) return '无'
  return new Date(dateTime).toLocaleString('zh-CN')
}

// 加载任务详情
const loadJobDetail = async () => {
  const jobId = Number(route.params.id)
  if (!jobId) {
    console.error('任务ID无效')
    return
  }
  
  loading.value = true
  try {
    const response: ApiResult<JobInfoVO> = await jobInfoApi.getJobInfoDetail(jobId)
    
    if (response.success) {
      jobDetail.value = response.data
    } else {
      console.error('加载任务详情失败:', response.message)
    }
  } catch (error) {
    console.error('加载任务详情出错:', error)
  } finally {
    loading.value = false
  }
}

// 刷新详情
const refreshDetail = () => {
  loadJobDetail()
}

// 触发任务
const triggerJob = async () => {
  if (!jobDetail.value) return
  
  triggering.value = true
  try {
    const response: ApiResult<string> = await jobInfoApi.triggerJob(jobDetail.value.id)
    if (response.success) {
      console.log('任务触发成功')
      // 刷新详情
      loadJobDetail()
    } else {
      console.error('任务触发失败:', response.message)
    }
  } catch (error) {
    console.error('触发任务出错:', error)
  } finally {
    triggering.value = false
  }
}

// 查看任务日志
const viewJobLogs = () => {
  if (!jobDetail.value) return
  router.push(`/job-logs/${jobDetail.value.id}`)
}

// 组件挂载时加载数据
onMounted(() => {
  loadJobDetail()
})
</script>

<style scoped>
.page-header {
  margin-bottom: 24px;
}

.header-content {
  display: flex;
  align-items: center;
}

.back-btn {
  margin-right: 16px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0;
  display: flex;
  align-items: center;
}

.title-icon {
  margin-right: 8px;
  color: #409eff;
}

.loading-container {
  text-align: center;
  padding: 60px 0;
}

.loading-text {
  margin-top: 16px;
  color: #909399;
}

.detail-card {
  margin-bottom: 24px;
  border-radius: 8px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fill-height {
  width: 80vw;
  max-width: 1200px;
  margin: 0 auto;
}
</style> 